<template>
  <div id="meetingRoomm5" class="meetingRoom" v-loading="loading">
    <div class="cancelPop" v-if="dialogVisible" :style="cancelPopStyle">
      <p class="title">确定取消排座?</p>
      <p>
        <span class="bt2" @click="comfirmClick()">确定</span
        ><span class="bt1" @click="dialogVisible = false">取消</span>
      </p>
    </div>
    <div
      class="reserveSeatlPop"
      v-if="reserveSeatVisible"
      :style="reserveSeatStyle"
    >
      <p class="title">确定占位?</p>
      <p>
        <span class="bt2" @click="reserveSeatcomfirmClick()">确定</span
        ><span class="bt1" @click="reserveSeatVisible = false">取消</span>
      </p>
    </div>
    <div class="memberList">
      <p class="title">报名人员</p>
      <div class="listTree">
        <el-tree
          v-if="members.length > 0"
          show-checkbox
          class="filter-tree"
          :data="members"
          node-key="id"
          :props="defaultProps"
          @check-change="handleCheckChange"
          ref="tree"
          :key="treeKey"
        >
        </el-tree>
      </div>
    </div>
    <div
      class="main"
      ref="main"
      @mousedown="startSelection($event)"
      @mouseup="endSelection"
      @mousemove="updateSelection"
    >
      <p class="title">三楼东会议报告厅席位图</p>
      <div
        class="selection-box"
        v-if="isSelecting"
        :style="selectionBoxStyle"
      ></div>
      <div class="content">
        <div class="left">
          <div class="left-top">
            <div
              v-for="(item, index) in seatData.slice(0, 120)"
              :key="index"
              :id="item.id"
              class="seat"
              :class="item.selected ? 'selected' : ''"
              @contextmenu.prevent="
                item.state == 1
                  ? selecteCell($event, index, item)
                  : item.id !== ''
                  ? reserveSeat($event, index, item)
                  : ''
              "
            >
              {{ item.member != null ? item.member.name : item.id.split("r")[0] }}
            </div>
          </div>
          <div class="aside"></div>
          <div class="left-bottom">
            <div
              v-for="(item, index) in seatData.slice(312, 392)"
              :key="index"
              :id="item.id"
              class="seat"
              :class="item.selected ? 'selected' : ''"
              @contextmenu.prevent="
                item.state == 1
                  ? selecteCell($event, index + 312, item)
                  : item.id !== ''
                  ? reserveSeat($event, index + 312, item)
                  : ''
              "
            >
              {{ item.member != null ? item.member.name : item.id.split("r")[0] }}
            </div>
          </div>
        </div>
        <div class="aisle"></div>
        <div class="center">
          <div class="center-top">
            <div
              v-for="(item, index) in seatData.slice(120, 192)"
              :key="index"
              :id="item.id"
              class="seat"
              :class="item.selected ? 'selected' : ''"
              @contextmenu.prevent="
                item.state == 1
                  ? selecteCell($event, index + 120, item)
                  : item.id !== ''
                  ? reserveSeat($event, index + 120, item)
                  : ''
              "
            >
              {{ item.member != null ? item.member.name : item.id.split("r")[0] }}
            </div>
          </div>
          <div class="aside"></div>
          <div class="center-bottom">
            <div
              v-for="(item, index) in seatData.slice(392, 440)"
              :key="index"
              :id="item.id"
              class="seat"
              :class="item.selected ? 'selected' : ''"
              @contextmenu.prevent="
                item.state == 1
                  ? selecteCell($event, index + 392, item)
                  : item.id !== ''
                  ? reserveSeat($event, index + 392, item)
                  : ''
              "
            >
              {{ item.member != null ? item.member.name : item.id.split("r")[0] }}
            </div>
          </div>
        </div>
        <div class="aisle"></div>
        <div class="right">
          <div class="right-top">
            <div
              v-for="(item, index) in seatData.slice(192, 312)"
              :key="index"
              :id="item.id"
              class="seat"
              :class="item.selected ? 'selected' : ''"
              @contextmenu.prevent="
                item.state == 1
                  ? selecteCell($event, index + 192, item)
                  : item.id !== ''
                  ? reserveSeat($event, index + 192, item)
                  : ''
              "
            >
              {{ item.member != null ? item.member.name : item.id.split("r")[0] }}
            </div>
          </div>
          <div class="aside"></div>
          <div class="right-bottom">
            <div
              v-for="(item, index) in seatData.slice(440, 520)"
              :key="index"
              :id="item.id"
              class="seat"
              :class="item.selected ? 'selected' : ''"
              @contextmenu.prevent="
                item.state == 1
                  ? selecteCell($event, index + 440, item)
                  : item.id !== ''
                  ? reserveSeat($event, index + 440, item)
                  : ''
              "
            >
              {{ item.member != null ? item.member.name : item.id.split("r")[0] }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="operateDiv">
      <!-- <el-input
        :title="meetingTitle"
        v-model="meetingTitle"
        placeholder="请输入会议标题"
      ></el-input> -->
      <span class="rowSeat" @click="rowSeat()">排座</span>
      <span class="saveAsImage" @click="saveAsImage">保存图片</span>
      <span class="printInfo" @click="print">打印</span>
      <span class="sellectAll" v-if="sellectAllSeat" @click="sellectAll"
        >全选座位</span
      >
      <span
        v-if="selecteCells.length > 0"
        class="reserveSeatMore"
        @click="reserveSeatMore"
        >占座</span
      >
      <span class="saveInfo" @click="saveInfo">保存座位表</span>
      <!-- <span class="cancelRowSeat" @click="cancelRowSeat()">取消排座</span> -->
    </div>
  </div>
</template>

<script>
// 引入 html2canvas
import html2canvas from "html2canvas";
import {
  getDeptMember,
  saveOrUpdateRowSeat,
  findRowSeatByMeetingId,
} from "@/apis/common.js";
export default {
  props: {
    type: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isRightClick: false, // 新增标志
      sellectAllSeat: true, //座位全选
      loading: true, //加载状态
      treeKey: 0, //渲染人员树
      id: "", //用来判断是否是新增或编辑
      // meetingTitle: "", //会议标题
      meetingId: "", //会议id
      members: [
        {
          id: "1",
          name: "研发部",
          memberList: [
            { id: "-1", name: "人员1" },
            { id: "-2", name: "人员2" },
            { id: "-3", name: "人员3" },
            { id: "-4", name: "人员4" },
            { id: "-5", name: "人员5" },
            { id: "-6", name: "人员6" },
            { id: "-7", name: "人员3" },
            { id: "-8", name: "人员4" },
            { id: "-9", name: "人员5" },
            { id: "-10", name: "人员6" },
            { id: "-11", name: "人员3" },
            { id: "-12", name: "人员4" },
            { id: "-13", name: "人员5" },
            { id: "-14", name: "人员6" },
            { id: "-15", name: "人员3" },
            { id: "-16", name: "人员4" },
            { id: "-17", name: "人员5" },
            { id: "-18", name: "人员6" },
            { id: "-19", name: "人员3" },
            { id: "-20", name: "人员4" },
            { id: "-21", name: "人员5" },
            { id: "-22", name: "人员6" },
            { id: "-23", name: "人员3" },
            { id: "-24", name: "人员4" },
            { id: "-25", name: "人员5" },
            { id: "-26", name: "人员6" },
            { id: "-27", name: "人员3" },
            { id: "-28", name: "人员4" },
            { id: "-29", name: "人员5" },
            { id: "-30", name: "人员6" },
            { id: "-31", name: "人员3" },
            { id: "-32", name: "人员4" },
            { id: "-33", name: "人员5" },
            { id: "-34", name: "人员6" },
            { id: "-35", name: "人员3" },
            { id: "-36", name: "人员4" },
            { id: "-37", name: "人员5" },
            { id: "-38", name: "人员6" },
            { id: "-39", name: "人员3" },
            { id: "-40", name: "人员4" },
            { id: "-41", name: "人员5" },
            { id: "-42", name: "人员6" },
            { id: "-43", name: "人员3" },
            { id: "-44", name: "人员4" },
            { id: "-45", name: "人员5" },
            { id: "-46", name: "人员6" },
            { id: "-47", name: "人员3" },
            { id: "-48", name: "人员4" },
            { id: "-49", name: "人员5" },
            { id: "-50", name: "人员6" },
            { id: "-51", name: "人员3" },
            { id: "-52", name: "人员4" },
            { id: "-53", name: "人员5" },
            { id: "-54", name: "人员6" },
            { id: "-55", name: "人员3" },
          ],
        },
        {
          id: "3",
          name: "研发部",
          memberList: [
            { id: "-1", name: "人员1" },
            { id: "-2", name: "人员2" },
            { id: "-3", name: "人员3" },
            { id: "-4", name: "人员4" },
            { id: "-5", name: "人员5" },
            { id: "-6", name: "人员6" },
            { id: "-7", name: "人员3" },
            { id: "-8", name: "人员4" },
            { id: "-9", name: "人员5" },
            { id: "-10", name: "人员6" },
            { id: "-11", name: "人员3" },
            { id: "-12", name: "人员4" },
            { id: "-13", name: "人员5" },
            { id: "-14", name: "人员6" },
            { id: "-15", name: "人员3" },
            { id: "-16", name: "人员4" },
            { id: "-17", name: "人员5" },
            { id: "-18", name: "人员6" },
            { id: "-19", name: "人员3" },
            { id: "-20", name: "人员4" },
            { id: "-21", name: "人员5" },
            { id: "-22", name: "人员6" },
            { id: "-23", name: "人员3" },
            { id: "-24", name: "人员4" },
            { id: "-25", name: "人员5" },
            { id: "-26", name: "人员6" },
            { id: "-27", name: "人员3" },
            { id: "-28", name: "人员4" },
            { id: "-29", name: "人员5" },
            { id: "-30", name: "人员6" },
            { id: "-31", name: "人员3" },
            { id: "-32", name: "人员4" },
            { id: "-33", name: "人员5" },
            { id: "-34", name: "人员6" },
            { id: "-35", name: "人员3" },
            { id: "-36", name: "人员4" },
            { id: "-37", name: "人员5" },
            { id: "-38", name: "人员6" },
            { id: "-39", name: "人员3" },
            { id: "-40", name: "人员4" },
            { id: "-41", name: "人员5" },
            { id: "-42", name: "人员6" },
            { id: "-43", name: "人员3" },
            { id: "-44", name: "人员4" },
            { id: "-45", name: "人员5" },
            { id: "-46", name: "人员6" },
            { id: "-47", name: "人员3" },
            { id: "-48", name: "人员4" },
            { id: "-49", name: "人员5" },
            { id: "-50", name: "人员6" },
            { id: "-51", name: "人员3" },
            { id: "-52", name: "人员4" },
            { id: "-53", name: "人员5" },
            { id: "-54", name: "人员6" },
            { id: "-55", name: "人员3" },
          ],
        },
        {
          id: "2",
          name: "测试部",
          memberList: [
            { id: "-5778907771624733075", name: "人员1" },
            { id: "-5778907771624733076", name: "人员2" },
            { id: "-5778907771624733077", name: "人员3" },
            { id: "-5778907771624733078", name: "人员4" },
            { id: "-5778907771624733079", name: "人员5" },
            { id: "-5778907771624733074", name: "人员6" },
          ],
        },
      ], // 报名的人员列表
      defaultProps: {
        children: "memberList",
        label: "name" || "deptName",
      },
      seatDataMember: [], // 已排座人员
      selectedMember: [], // 选中的成员
      // 固定座位
      seatData: [
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "34r1", state: 0, selected: false },
        { name: "", id: "32r1", state: 0, selected: false },
        { name: "", id: "30r1", state: 0, selected: false },
        { name: "", id: "28r1", state: 0, selected: false },
        { name: "", id: "26r1", state: 0, selected: false },
        { name: "", id: "24r1", state: 0, selected: false },
        { name: "", id: "22r1", state: 0, selected: false },
        { name: "", id: "20r1", state: 0, selected: false },
        { name: "", id: "18r1", state: 0, selected: false },
        { name: "", id: "16r1", state: 0, selected: false },
        { name: "", id: "14r1", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "36r2", state: 0, selected: false },
        { name: "", id: "34r2", state: 0, selected: false },
        { name: "", id: "32r2", state: 0, selected: false },
        { name: "", id: "30r2", state: 0, selected: false },
        { name: "", id: "28r2", state: 0, selected: false },
        { name: "", id: "26r2", state: 0, selected: false },
        { name: "", id: "24r2", state: 0, selected: false },
        { name: "", id: "22r2", state: 0, selected: false },
        { name: "", id: "20r2", state: 0, selected: false },
        { name: "", id: "18r2", state: 0, selected: false },
        { name: "", id: "16r2", state: 0, selected: false },
        { name: "", id: "14r2", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "38r3", state: 0, selected: false },
        { name: "", id: "36r3", state: 0, selected: false },
        { name: "", id: "34r3", state: 0, selected: false },
        { name: "", id: "32r3", state: 0, selected: false },
        { name: "", id: "30r3", state: 0, selected: false },
        { name: "", id: "28r3", state: 0, selected: false },
        { name: "", id: "26r3", state: 0, selected: false },
        { name: "", id: "24r3", state: 0, selected: false },
        { name: "", id: "22r3", state: 0, selected: false },
        { name: "", id: "20r3", state: 0, selected: false },
        { name: "", id: "18r3", state: 0, selected: false },
        { name: "", id: "16r3", state: 0, selected: false },
        { name: "", id: "14r3", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "40r4", state: 0, selected: false },
        { name: "", id: "38r4", state: 0, selected: false },
        { name: "", id: "36r4", state: 0, selected: false },
        { name: "", id: "34r4", state: 0, selected: false },
        { name: "", id: "32r4", state: 0, selected: false },
        { name: "", id: "30r4", state: 0, selected: false },
        { name: "", id: "28r4", state: 0, selected: false },
        { name: "", id: "26r4", state: 0, selected: false },
        { name: "", id: "24r4", state: 0, selected: false },
        { name: "", id: "22r4", state: 0, selected: false },
        { name: "", id: "20r4", state: 0, selected: false },
        { name: "", id: "18r4", state: 0, selected: false },
        { name: "", id: "16r4", state: 0, selected: false },
        { name: "", id: "14r4", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "42r5", state: 0, selected: false },
        { name: "", id: "40r5", state: 0, selected: false },
        { name: "", id: "38r5", state: 0, selected: false },
        { name: "", id: "36r5", state: 0, selected: false },
        { name: "", id: "34r5", state: 0, selected: false },
        { name: "", id: "32r5", state: 0, selected: false },
        { name: "", id: "30r5", state: 0, selected: false },
        { name: "", id: "28r5", state: 0, selected: false },
        { name: "", id: "26r5", state: 0, selected: false },
        { name: "", id: "24r5", state: 0, selected: false },
        { name: "", id: "22r5", state: 0, selected: false },
        { name: "", id: "20r5", state: 0, selected: false },
        { name: "", id: "18r5", state: 0, selected: false },
        { name: "", id: "16r5", state: 0, selected: false },
        { name: "", id: "14r5", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "44r6", state: 0, selected: false },
        { name: "", id: "42r6", state: 0, selected: false },
        { name: "", id: "40r6", state: 0, selected: false },
        { name: "", id: "38r6", state: 0, selected: false },
        { name: "", id: "36r6", state: 0, selected: false },
        { name: "", id: "34r6", state: 0, selected: false },
        { name: "", id: "32r6", state: 0, selected: false },
        { name: "", id: "30r6", state: 0, selected: false },
        { name: "", id: "28r6", state: 0, selected: false },
        { name: "", id: "26r6", state: 0, selected: false },
        { name: "", id: "24r6", state: 0, selected: false },
        { name: "", id: "22r6", state: 0, selected: false },
        { name: "", id: "20r6", state: 0, selected: false },
        { name: "", id: "18r6", state: 0, selected: false },
        { name: "", id: "16r6", state: 0, selected: false },
        { name: "", id: "14r6", state: 0, selected: false },

        { name: "", id: "12r1", state: 0, selected: false },
        { name: "", id: "10r1", state: 0, selected: false },
        { name: "", id: "8r1", state: 0, selected: false },
        { name: "", id: "6r1", state: 0, selected: false },
        { name: "", id: "4r1", state: 0, selected: false },
        { name: "", id: "2r1", state: 0, selected: false },
        { name: "", id: "1r1", state: 0, selected: false },
        { name: "", id: "3r1", state: 0, selected: false },
        { name: "", id: "5r1", state: 0, selected: false },
        { name: "", id: "7r1", state: 0, selected: false },
        { name: "", id: "9r1", state: 0, selected: false },
        { name: "", id: "11r1", state: 0, selected: false },

        { name: "", id: "12r2", state: 0, selected: false },
        { name: "", id: "10r2", state: 0, selected: false },
        { name: "", id: "8r2", state: 0, selected: false },
        { name: "", id: "6r2", state: 0, selected: false },
        { name: "", id: "4r2", state: 0, selected: false },
        { name: "", id: "2r2", state: 0, selected: false },
        { name: "", id: "1r2", state: 0, selected: false },
        { name: "", id: "3r2", state: 0, selected: false },
        { name: "", id: "5r2", state: 0, selected: false },
        { name: "", id: "7r2", state: 0, selected: false },
        { name: "", id: "9r2", state: 0, selected: false },
        { name: "", id: "11r2", state: 0, selected: false },

        { name: "", id: "12r3", state: 0, selected: false },
        { name: "", id: "10r3", state: 0, selected: false },
        { name: "", id: "8r3", state: 0, selected: false },
        { name: "", id: "6r3", state: 0, selected: false },
        { name: "", id: "4r3", state: 0, selected: false },
        { name: "", id: "2r3", state: 0, selected: false },
        { name: "", id: "1r3", state: 0, selected: false },
        { name: "", id: "3r3", state: 0, selected: false },
        { name: "", id: "5r3", state: 0, selected: false },
        { name: "", id: "7r3", state: 0, selected: false },
        { name: "", id: "9r3", state: 0, selected: false },
        { name: "", id: "11r3", state: 0, selected: false },

        { name: "", id: "12r4", state: 0, selected: false },
        { name: "", id: "10r4", state: 0, selected: false },
        { name: "", id: "8r4", state: 0, selected: false },
        { name: "", id: "6r4", state: 0, selected: false },
        { name: "", id: "4r4", state: 0, selected: false },
        { name: "", id: "2r4", state: 0, selected: false },
        { name: "", id: "1r4", state: 0, selected: false },
        { name: "", id: "3r4", state: 0, selected: false },
        { name: "", id: "5r4", state: 0, selected: false },
        { name: "", id: "7r4", state: 0, selected: false },
        { name: "", id: "9r4", state: 0, selected: false },
        { name: "", id: "11r4", state: 0, selected: false },

        { name: "", id: "12r5", state: 0, selected: false },
        { name: "", id: "10r5", state: 0, selected: false },
        { name: "", id: "8r5", state: 0, selected: false },
        { name: "", id: "6r5", state: 0, selected: false },
        { name: "", id: "4r5", state: 0, selected: false },
        { name: "", id: "2r5", state: 0, selected: false },
        { name: "", id: "1r5", state: 0, selected: false },
        { name: "", id: "3r5", state: 0, selected: false },
        { name: "", id: "5r5", state: 0, selected: false },
        { name: "", id: "7r5", state: 0, selected: false },
        { name: "", id: "9r5", state: 0, selected: false },
        { name: "", id: "11r5", state: 0, selected: false },

        { name: "", id: "12r6", state: 0, selected: false },
        { name: "", id: "10r6", state: 0, selected: false },
        { name: "", id: "8r6", state: 0, selected: false },
        { name: "", id: "6r6", state: 0, selected: false },
        { name: "", id: "4r6", state: 0, selected: false },
        { name: "", id: "2r6", state: 0, selected: false },
        { name: "", id: "1r6", state: 0, selected: false },
        { name: "", id: "3r6", state: 0, selected: false },
        { name: "", id: "5r6", state: 0, selected: false },
        { name: "", id: "7r6", state: 0, selected: false },
        { name: "", id: "9r6", state: 0, selected: false },
        { name: "", id: "11r6", state: 0, selected: false },

        { name: "", id: "13r1", state: 0, selected: false },
        { name: "", id: "15r1", state: 0, selected: false },
        { name: "", id: "17r1", state: 0, selected: false },
        { name: "", id: "19r1", state: 0, selected: false },
        { name: "", id: "21r1", state: 0, selected: false },
        { name: "", id: "23r1", state: 0, selected: false },
        { name: "", id: "25r1", state: 0, selected: false },
        { name: "", id: "27r1", state: 0, selected: false },
        { name: "", id: "29r1", state: 0, selected: false },
        { name: "", id: "31r1", state: 0, selected: false },
        { name: "", id: "33r1", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },

        { name: "", id: "13r2", state: 0, selected: false },
        { name: "", id: "15r2", state: 0, selected: false },
        { name: "", id: "17r2", state: 0, selected: false },
        { name: "", id: "19r2", state: 0, selected: false },
        { name: "", id: "21r2", state: 0, selected: false },
        { name: "", id: "23r2", state: 0, selected: false },
        { name: "", id: "25r2", state: 0, selected: false },
        { name: "", id: "27r2", state: 0, selected: false },
        { name: "", id: "29r2", state: 0, selected: false },
        { name: "", id: "31r2", state: 0, selected: false },
        { name: "", id: "33r2", state: 0, selected: false },
        { name: "", id: "35r2", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },

        { name: "", id: "13r3", state: 0, selected: false },
        { name: "", id: "15r3", state: 0, selected: false },
        { name: "", id: "17r3", state: 0, selected: false },
        { name: "", id: "19r3", state: 0, selected: false },
        { name: "", id: "21r3", state: 0, selected: false },
        { name: "", id: "23r3", state: 0, selected: false },
        { name: "", id: "25r3", state: 0, selected: false },
        { name: "", id: "27r3", state: 0, selected: false },
        { name: "", id: "29r3", state: 0, selected: false },
        { name: "", id: "31r3", state: 0, selected: false },
        { name: "", id: "33r3", state: 0, selected: false },
        { name: "", id: "35r3", state: 0, selected: false },
        { name: "", id: "37r3", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },

        { name: "", id: "13r4", state: 0, selected: false },
        { name: "", id: "15r4", state: 0, selected: false },
        { name: "", id: "17r4", state: 0, selected: false },
        { name: "", id: "19r4", state: 0, selected: false },
        { name: "", id: "21r4", state: 0, selected: false },
        { name: "", id: "23r4", state: 0, selected: false },
        { name: "", id: "25r4", state: 0, selected: false },
        { name: "", id: "27r4", state: 0, selected: false },
        { name: "", id: "29r4", state: 0, selected: false },
        { name: "", id: "31r4", state: 0, selected: false },
        { name: "", id: "33r4", state: 0, selected: false },
        { name: "", id: "35r4", state: 0, selected: false },
        { name: "", id: "37r4", state: 0, selected: false },
        { name: "", id: "39r4", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },

        { name: "", id: "13r5", state: 0, selected: false },
        { name: "", id: "15r5", state: 0, selected: false },
        { name: "", id: "17r5", state: 0, selected: false },
        { name: "", id: "19r5", state: 0, selected: false },
        { name: "", id: "21r5", state: 0, selected: false },
        { name: "", id: "23r5", state: 0, selected: false },
        { name: "", id: "25r5", state: 0, selected: false },
        { name: "", id: "27r5", state: 0, selected: false },
        { name: "", id: "29r5", state: 0, selected: false },
        { name: "", id: "31r5", state: 0, selected: false },
        { name: "", id: "33r5", state: 0, selected: false },
        { name: "", id: "35r5", state: 0, selected: false },
        { name: "", id: "37r5", state: 0, selected: false },
        { name: "", id: "39r5", state: 0, selected: false },
        { name: "", id: "41r5", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },

        { name: "", id: "13r6", state: 0, selected: false },
        { name: "", id: "15r6", state: 0, selected: false },
        { name: "", id: "17r6", state: 0, selected: false },
        { name: "", id: "19r6", state: 0, selected: false },
        { name: "", id: "21r6", state: 0, selected: false },
        { name: "", id: "23r6", state: 0, selected: false },
        { name: "", id: "25r6", state: 0, selected: false },
        { name: "", id: "27r6", state: 0, selected: false },
        { name: "", id: "29r6", state: 0, selected: false },
        { name: "", id: "31r6", state: 0, selected: false },
        { name: "", id: "33r6", state: 0, selected: false },
        { name: "", id: "35r6", state: 0, selected: false },
        { name: "", id: "37r6", state: 0, selected: false },
        { name: "", id: "39r6", state: 0, selected: false },
        { name: "", id: "41r6", state: 0, selected: false },
        { name: "", id: "43r6", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "46r7", state: 0, selected: false },
        { name: "", id: "44r7", state: 0, selected: false },
        { name: "", id: "42r7", state: 0, selected: false },
        { name: "", id: "40r7", state: 0, selected: false },
        { name: "", id: "38r7", state: 0, selected: false },
        { name: "", id: "36r7", state: 0, selected: false },
        { name: "", id: "34r7", state: 0, selected: false },
        { name: "", id: "32r7", state: 0, selected: false },
        { name: "", id: "30r7", state: 0, selected: false },
        { name: "", id: "28r7", state: 0, selected: false },
        { name: "", id: "26r7", state: 0, selected: false },
        { name: "", id: "24r7", state: 0, selected: false },
        { name: "", id: "22r7", state: 0, selected: false },
        { name: "", id: "20r7", state: 0, selected: false },
        { name: "", id: "18r7", state: 0, selected: false },
        { name: "", id: "16r7", state: 0, selected: false },
        { name: "", id: "14r7", state: 0, selected: false },

        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "48r8", state: 0, selected: false },
        { name: "", id: "46r8", state: 0, selected: false },
        { name: "", id: "44r8", state: 0, selected: false },
        { name: "", id: "42r8", state: 0, selected: false },
        { name: "", id: "40r8", state: 0, selected: false },
        { name: "", id: "38r8", state: 0, selected: false },
        { name: "", id: "36r8", state: 0, selected: false },
        { name: "", id: "34r8", state: 0, selected: false },
        { name: "", id: "32r8", state: 0, selected: false },
        { name: "", id: "30r8", state: 0, selected: false },
        { name: "", id: "28r8", state: 0, selected: false },
        { name: "", id: "26r8", state: 0, selected: false },
        { name: "", id: "24r8", state: 0, selected: false },
        { name: "", id: "22r8", state: 0, selected: false },
        { name: "", id: "20r8", state: 0, selected: false },
        { name: "", id: "18r8", state: 0, selected: false },
        { name: "", id: "16r8", state: 0, selected: false },
        { name: "", id: "14r8", state: 0, selected: false },

        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "50r9", state: 0, selected: false },
        { name: "", id: "48r9", state: 0, selected: false },
        { name: "", id: "46r9", state: 0, selected: false },
        { name: "", id: "44r9", state: 0, selected: false },
        { name: "", id: "42r9", state: 0, selected: false },
        { name: "", id: "40r9", state: 0, selected: false },
        { name: "", id: "38r9", state: 0, selected: false },
        { name: "", id: "36r9", state: 0, selected: false },
        { name: "", id: "34r9", state: 0, selected: false },
        { name: "", id: "32r9", state: 0, selected: false },
        { name: "", id: "30r9", state: 0, selected: false },
        { name: "", id: "28r9", state: 0, selected: false },
        { name: "", id: "26r9", state: 0, selected: false },
        { name: "", id: "24r9", state: 0, selected: false },
        { name: "", id: "22r9", state: 0, selected: false },
        { name: "", id: "20r9", state: 0, selected: false },
        { name: "", id: "18r9", state: 0, selected: false },
        { name: "", id: "16r9", state: 0, selected: false },
        { name: "", id: "14r9", state: 0, selected: false },

        { name: "", id: "52r10", state: 0, selected: false },
        { name: "", id: "50r10", state: 0, selected: false },
        { name: "", id: "48r10", state: 0, selected: false },
        { name: "", id: "46r10", state: 0, selected: false },
        { name: "", id: "44r10", state: 0, selected: false },
        { name: "", id: "42r10", state: 0, selected: false },
        { name: "", id: "40r10", state: 0, selected: false },
        { name: "", id: "38r10", state: 0, selected: false },
        { name: "", id: "36r10", state: 0, selected: false },
        { name: "", id: "34r10", state: 0, selected: false },
        { name: "", id: "32r10", state: 0, selected: false },
        { name: "", id: "30r10", state: 0, selected: false },
        { name: "", id: "28r10", state: 0, selected: false },
        { name: "", id: "26r10", state: 0, selected: false },
        { name: "", id: "24r10", state: 0, selected: false },
        { name: "", id: "22r10", state: 0, selected: false },
        { name: "", id: "20r10", state: 0, selected: false },
        { name: "", id: "18r10", state: 0, selected: false },
        { name: "", id: "16r10", state: 0, selected: false },
        { name: "", id: "14r10", state: 0, selected: false },

        { name: "", id: "12r7", state: 0, selected: false },
        { name: "", id: "10r7", state: 0, selected: false },
        { name: "", id: "8r7", state: 0, selected: false },
        { name: "", id: "6r7", state: 0, selected: false },
        { name: "", id: "4r7", state: 0, selected: false },
        { name: "", id: "2r7", state: 0, selected: false },
        { name: "", id: "1r7", state: 0, selected: false },
        { name: "", id: "3r7", state: 0, selected: false },
        { name: "", id: "5r7", state: 0, selected: false },
        { name: "", id: "7r7", state: 0, selected: false },
        { name: "", id: "9r7", state: 0, selected: false },
        { name: "", id: "11r7", state: 0, selected: false },

        { name: "", id: "12r8", state: 0, selected: false },
        { name: "", id: "10r8", state: 0, selected: false },
        { name: "", id: "8r8", state: 0, selected: false },
        { name: "", id: "6r8", state: 0, selected: false },
        { name: "", id: "4r8", state: 0, selected: false },
        { name: "", id: "2r8", state: 0, selected: false },
        { name: "", id: "1r8", state: 0, selected: false },
        { name: "", id: "3r8", state: 0, selected: false },
        { name: "", id: "5r8", state: 0, selected: false },
        { name: "", id: "7r8", state: 0, selected: false },
        { name: "", id: "9r8", state: 0, selected: false },
        { name: "", id: "11r8", state: 0, selected: false },

        { name: "", id: "12r9", state: 0, selected: false },
        { name: "", id: "10r9", state: 0, selected: false },
        { name: "", id: "8r9", state: 0, selected: false },
        { name: "", id: "6r9", state: 0, selected: false },
        { name: "", id: "4r9", state: 0, selected: false },
        { name: "", id: "2r9", state: 0, selected: false },
        { name: "", id: "1r9", state: 0, selected: false },
        { name: "", id: "3r9", state: 0, selected: false },
        { name: "", id: "5r9", state: 0, selected: false },
        { name: "", id: "7r9", state: 0, selected: false },
        { name: "", id: "9r9", state: 0, selected: false },
        { name: "", id: "11r9", state: 0, selected: false },

        { name: "", id: "12r10", state: 0, selected: false },
        { name: "", id: "10r10", state: 0, selected: false },
        { name: "", id: "8r10", state: 0, selected: false },
        { name: "", id: "6r10", state: 0, selected: false },
        { name: "", id: "4r10", state: 0, selected: false },
        { name: "", id: "2r10", state: 0, selected: false },
        { name: "", id: "1r10", state: 0, selected: false },
        { name: "", id: "3r10", state: 0, selected: false },
        { name: "", id: "5r10", state: 0, selected: false },
        { name: "", id: "7r10", state: 0, selected: false },
        { name: "", id: "9r10", state: 0, selected: false },
        { name: "", id: "11r10", state: 0, selected: false },

        { name: "", id: "13r7", state: 0, selected: false },
        { name: "", id: "15r7", state: 0, selected: false },
        { name: "", id: "17r7", state: 0, selected: false },
        { name: "", id: "19r7", state: 0, selected: false },
        { name: "", id: "21r7", state: 0, selected: false },
        { name: "", id: "23r7", state: 0, selected: false },
        { name: "", id: "25r7", state: 0, selected: false },
        { name: "", id: "27r7", state: 0, selected: false },
        { name: "", id: "29r7", state: 0, selected: false },
        { name: "", id: "31r7", state: 0, selected: false },
        { name: "", id: "33r7", state: 0, selected: false },
        { name: "", id: "35r7", state: 0, selected: false },
        { name: "", id: "37r7", state: 0, selected: false },
        { name: "", id: "39r7", state: 0, selected: false },
        { name: "", id: "41r7", state: 0, selected: false },
        { name: "", id: "43r7", state: 0, selected: false },
        { name: "", id: "45r7", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },

        { name: "", id: "13r8", state: 0, selected: false },
        { name: "", id: "15r8", state: 0, selected: false },
        { name: "", id: "17r8", state: 0, selected: false },
        { name: "", id: "19r8", state: 0, selected: false },
        { name: "", id: "21r8", state: 0, selected: false },
        { name: "", id: "23r8", state: 0, selected: false },
        { name: "", id: "25r8", state: 0, selected: false },
        { name: "", id: "27r8", state: 0, selected: false },
        { name: "", id: "29r8", state: 0, selected: false },
        { name: "", id: "31r8", state: 0, selected: false },
        { name: "", id: "33r8", state: 0, selected: false },
        { name: "", id: "35r8", state: 0, selected: false },
        { name: "", id: "37r8", state: 0, selected: false },
        { name: "", id: "39r8", state: 0, selected: false },
        { name: "", id: "41r8", state: 0, selected: false },
        { name: "", id: "43r8", state: 0, selected: false },
        { name: "", id: "45r8", state: 0, selected: false },
        { name: "", id: "47r8", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },

        { name: "", id: "13r9", state: 0, selected: false },
        { name: "", id: "15r9", state: 0, selected: false },
        { name: "", id: "17r9", state: 0, selected: false },
        { name: "", id: "19r9", state: 0, selected: false },
        { name: "", id: "21r9", state: 0, selected: false },
        { name: "", id: "23r9", state: 0, selected: false },
        { name: "", id: "25r9", state: 0, selected: false },
        { name: "", id: "27r9", state: 0, selected: false },
        { name: "", id: "29r9", state: 0, selected: false },
        { name: "", id: "31r9", state: 0, selected: false },
        { name: "", id: "33r9", state: 0, selected: false },
        { name: "", id: "35r9", state: 0, selected: false },
        { name: "", id: "37r9", state: 0, selected: false },
        { name: "", id: "39r9", state: 0, selected: false },
        { name: "", id: "41r9", state: 0, selected: false },
        { name: "", id: "43r9", state: 0, selected: false },
        { name: "", id: "45r9", state: 0, selected: false },
        { name: "", id: "47r9", state: 0, selected: false },
        { name: "", id: "49r9", state: 0, selected: false },
        { name: "", id: "", state: 0, selected: false },

        { name: "", id: "13r10", state: 0, selected: false },
        { name: "", id: "15r10", state: 0, selected: false },
        { name: "", id: "17r10", state: 0, selected: false },
        { name: "", id: "19r10", state: 0, selected: false },
        { name: "", id: "21r10", state: 0, selected: false },
        { name: "", id: "23r10", state: 0, selected: false },
        { name: "", id: "25r10", state: 0, selected: false },
        { name: "", id: "27r10", state: 0, selected: false },
        { name: "", id: "29r10", state: 0, selected: false },
        { name: "", id: "31r10", state: 0, selected: false },
        { name: "", id: "33r10", state: 0, selected: false },
        { name: "", id: "35r10", state: 0, selected: false },
        { name: "", id: "37r10", state: 0, selected: false },
        { name: "", id: "39r10", state: 0, selected: false },
        { name: "", id: "41r10", state: 0, selected: false },
        { name: "", id: "43r10", state: 0, selected: false },
        { name: "", id: "45r10", state: 0, selected: false },
        { name: "", id: "47r10", state: 0, selected: false },
        { name: "", id: "49r10", state: 0, selected: false },
        { name: "", id: "51r10", state: 0, selected: false },
      ],
      isSelecting: false, //是否在拖拽
      startX: 0,
      startY: 0,
      endX: 0,
      endY: 0,
      selecteCells: [], //选中的座位
      dialogVisible: false, //取消排座弹窗
      reserveSeatVisible: false, //占位弹窗
      cancelPopStyle: {}, //取消排座弹窗样式
      reserveSeatStyle: {}, //占位弹窗样式
      cancelSignSeat: {
        index: null, //取消的座位索引
      }, //取消单个排座座位
      reserveSeatSignSeat: {
        index: null, //占位的座位索引
      }, //占
    };
  },
  mounted() {
    console.log("mounted", this.type);
    // 获取当前 URL
    const url = new URL(document.location.href);
    const params = new URLSearchParams(url.search);
    // 获取参数值
    const meetingId = params.get("meetingId");
    if (meetingId) {
      this.meetingId = meetingId;
    }
    this.getMemmber();
    this.getRowSeatByMeetingId();
  },
  computed: {
    selectionBoxStyle() {
      const width = Math.abs(this.endX - this.startX);
      const height = Math.abs(this.endY - this.startY);
      const left = Math.min(this.startX, this.endX);
      const top = Math.min(this.startY, this.endY);

      return {
        width: `${width}px`,
        height: `${height}px`,
        left: `${left}px`,
        top: `${top}px`,
        position: "fixed",
        border: "1px dashed #000",
        backgroundColor: "rgba(0, 0, 255, 0.2)",
        pointerEvents: "none",
      };
    },
  },
  watch: {
    seatData: {
      handler(newVal) {
        if(newVal.findIndex((item) => item.selected == true) != -1){
          return
        }
        let result = [];
        newVal.forEach((item,index) => {
            if(item.member && item.member.id){
              console.log('index',index)
                this.members.forEach((department, departmentIndex) => {
                const memberIndex = department.memberList.findIndex(member => member.id == item.member.id);
                console.log('memberIndex',memberIndex)
                if (memberIndex !== -1) {
                    result.push({ departmentIndex, memberIndex });
                }
              });
            }
        })
        this.members.forEach((item,departmentIndex) => {
          item.memberList.forEach((member, memberIndex) => {
            this.members[departmentIndex].memberList[memberIndex].disabled = false;
          });
        })
        result.forEach((item) => {
          this.members[item.departmentIndex].memberList[item.memberIndex].disabled = true
        })
        this.treeKey += 1;
      },
      deep: true,
    },
  },
  methods: {
    // 座位全选
    sellectAll() {
      this.sellectAllSeat = true;
      console.log("座位全选");
      this.seatData.forEach((item, index) => {
        if (item.state == 0 && item.id != "") {
          item.selected = 1;
          this.selecteCells.push(item);
        }
      });
    },
    //右键单个座位选择
    selecteCell(e, index, item) {
      this.cancelSignSeat.index = index;
      console.log(e, index, item);
      this.dialogVisible = true;
      this.cancelPopStyle = {
        top: `${e.clientY - 50}px`,
        left: `${e.clientX - 30}px`,
      };
    },
    // 右键占位选择
    reserveSeat(e, index, item) {
      console.log("占位");
      this.reserveSeatSignSeat.index = index;
      this.reserveSeatVisible = true;
      this.reserveSeatStyle = {
        top: `${e.clientY - 50}px`,
        left: `${e.clientX - 30}px`,
      };
    },
    //确定取消排座
    comfirmClick() {
      this.dialogVisible = false;
      this.seatData[this.cancelSignSeat.index].state = 0;
      this.seatData[this.cancelSignSeat.index].member = null;
    },
    // 确定占位
    reserveSeatcomfirmClick() {
      console.log("占位确定");
      this.reserveSeatVisible = false;
      this.seatData[this.reserveSeatSignSeat.index].state = 1;
      this.seatData[this.reserveSeatSignSeat.index].member = {
        name: "已占座",
      };
    },
    // 保存图片
    saveAsImage() {
      console.log("保存图片");
      const element = this.$refs.main; // 获取要保存的元素
      html2canvas(element)
        .then((canvas) => {
          const dataURL = canvas.toDataURL("image/png"); // 将 canvas 转换为图片 URL

          if (window.navigator.msSaveBlob) {
            // IE 处理
            const byteString = atob(dataURL.split(",")[1]);
            const mimeString = dataURL
              .split(",")[0]
              .split(":")[1]
              .split(";")[0];
            const ab = new ArrayBuffer(byteString.length);
            const ia = new Uint8Array(ab);

            for (let i = 0; i < byteString.length; i++) {
              ia[i] = byteString.charCodeAt(i);
            }

            const blob = new Blob([ab], { type: mimeString });
            window.navigator.msSaveBlob(blob, "会议室座位表.png");
          } else {
            // 其他浏览器
            const link = document.createElement("a");
            link.href = dataURL; // 设置链接地址
            link.download = "会议室座位表.png"; // 设置下载的文件名
            link.click(); // 模拟点击链接
          }
        })
        .catch((error) => {
          console.error("生成图片时出错:", error); // 捕获错误
        });
    },
    // 保存座位表
    async saveInfo() {
      console.log("保存座位表", this.seatData);
      if (this.id) {
        await saveOrUpdateRowSeat({
          meetingId: this.meetingId,
          // meetingName: this.meetingTitle,
          rowSeatData: JSON.stringify(this.seatData),
          id: this.id,
          type: this.type,
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success("保存信息成功");
          } else {
            this.$message.error("保存信息失败");
          }
          console.log("保存座位表res>>>>>>>>>>>>>", res);
        });
      } else {
        await saveOrUpdateRowSeat({
          meetingId: this.meetingId,
          // meetingName: this.meetingTitle,
          rowSeatData: JSON.stringify(this.seatData),
          type: this.type,
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success("保存信息成功");
          } else {
            this.$message.error("保存信息失败");
          }
          console.log("保存座位表res>>>>>>>>>>>>>", res);
        });
      }
    },
    // 打印
    print() {
      window.print();
    },
    // 多个座位占座
    reserveSeatMore() {
      console.log("占座多个座位", this.selecteCells);
      this.selecteCells.forEach((item) => {
        let index = this.seatData.findIndex((it) => {
          return it.id == item.id;
        });
        this.seatData[index].member = { name: "已占座" };
        this.seatData[index].state = 1;
      });
      this.seatData.forEach((item) => {
        item.selected = false;
      });
      this.selecteCells = [];
    },
    handleCheckChange(data, checked, indeterminate) {
      let arr = this.$refs.tree.getCheckedNodes();
      this.selectedMember = arr.filter((item) => {
        return !item.memberList;
      });
      console.log(this.selectedMember);
    },
    startSelection(event) {
      event.preventDefault();
      this.isSelecting = true;
      this.startX = event.clientX;
      this.startY = event.clientY;
      this.endX = event.clientX;
      this.endY = event.clientY;

      // Reset selection
      this.seatData.forEach((item) => (item.selected = false));
    },
    updateSelection(event) {
      if (this.isSelecting) {
        this.selecteCells = [];
        this.endX = event.clientX;
        this.endY = event.clientY;
        this.selectSeats();
      }
    },
    endSelection() {
      this.isSelecting = false;
    },
    selectSeats() {
      const selectionRect = {
        left: Math.min(this.startX, this.endX),
        top: Math.min(this.startY, this.endY),
        right: Math.max(this.startX, this.endX),
        bottom: Math.max(this.startY, this.endY),
      };
      this.seatData.forEach((item) => {
        const seatElement = document.getElementById(item.id);
        if (seatElement) {
          const rect = seatElement.getBoundingClientRect();
          if (
            rect.left >= selectionRect.left &&
            rect.right <= selectionRect.right &&
            rect.top >= selectionRect.top &&
            rect.bottom <= selectionRect.bottom &&
            !item.state
          ) {
            item.selected = true;
            this.selecteCells.push(item);
          } else {
            item.selected = false;
          }
        }
      });
    },
    async getMemmber() {
      await getDeptMember({ meetingId: this.meetingId }).then((res) => {
        console.log("报名人员>>>>>>>>>>>>>>>", res);
        if (res.code == 200) {
          this.members = res.data;
        }
      });
    },
     async getRowSeatByMeetingId() {
      await findRowSeatByMeetingId({ meetingId: this.meetingId,type:this.type }).then(
        (res) => {
          console.log("获取会议室排座信息>>>>>>>>>>>>>>>", res);
          if (res.code == 200 && res.data !== []) {
            res.data.type == this.type ? this.seatData = JSON.parse(res.data.rowSeatData) : '';
            // this.meetingTitle = res.data.meetingRoomName;
            if (res.data.id) {
              this.id = res.data.id;
            }
            console.log(
              "获取会议室排座信息this.seatData>>>>>>>>>>>>>>>",
              this.seatData
            );
            
          }
          setTimeout(()=>{
            this.loading = false
          },500)

        }
      );
    },
    // 排座
    rowSeat() {
      this.selecteCells.sort((a, b) => {
        // 提取排数和座位号
        const [aRow, aSeat] = a.id.split("r").map(Number);
        const [bRow, bSeat] = b.id.split("r").map(Number);

        // 判断排数
        if (aSeat > 13 && bSeat > 13) {
          return 0; // 都大于 13，保持原顺序
        } else if (aSeat > 13) {
          return 1; // a 在后
        } else if (bSeat > 13) {
          return -1; // b 在后
        } else if (aSeat !== bSeat) {
          return aSeat - bSeat; // 按排数升序
        }
        // 如果排数相同，则按座位号排序
        return aRow - bRow; // 按座位号升序
      });
      console.log("选中的座位", this.selecteCells);
      let indexArr = [];
      this.selecteCells.forEach((cell) => {
        indexArr.push(
          this.seatData.findIndex((itemCell) => {
            return itemCell.id == cell.id;
          })
        );
      });
      this.selectedMember.forEach((item, index) => {
        if (this.seatData[indexArr[index]]) {
          this.seatData[indexArr[index]].member = item;
          this.seatData[indexArr[index]].state = 1;
          this.seatDataMember.push(item);
        }
      });
      console.log("座位数据", this.seatData);
      // this.members.forEach((dept) => {
      //   dept.memberList = dept.memberList.filter(
      //     (member) => !this.seatDataMember.includes(member)
      //   );
      // });
      this.resetChecked();
      this.seatData.forEach((item) => {
        item.selected = false;
      });
      console.log("选中的人员", this.selectedMember);
      console.log("已排座人员", this.seatDataMember);
      console.log("未排座人员", this.members);
    },
    // 取消排座
    cancelRowSeat() {},
    // 清空树形控件选中数据
    resetChecked() {
      this.$refs.tree.setCheckedKeys([]);
    },
  },
};
</script>

<style lang="less" scope>
@import "../style/index.less";
#meetingRoomm5 {
  width: 100%;
  height: 500px;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
  display: flex;
  .reserveSeatlPop,
  .cancelPop {
    padding: 2px 5px;
    width: 100px;
    height: 44px;
    position: fixed;
    z-index: 999;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 4px;
    font-size: 12px;
    .title {
      font-size: 12px;
      line-height: 20px;
    }
    .bt1 {
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      background: #fff;
      border: 1px solid #dcdfe6;
      color: #606266;
      -webkit-appearance: none;
      text-align: center;
      box-sizing: border-box;
      outline: none;
      margin: 0;
      transition: 0.1s;
      font-weight: 500;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      padding: 2px 3px;
      float: right;
      font-size: 12px;
      border-radius: 4px;
    }
    .bt2 {
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      background-color: #409eff;
      border-color: #409eff;
      color: #fff;
      -webkit-appearance: none;
      text-align: center;
      box-sizing: border-box;
      float: right;
      outline: none;
      margin: 0;
      transition: 0.1s;
      font-weight: 500;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      padding: 2px 3px;
      font-size: 12px;
      border-radius: 4px;
      margin-left: 5px;
    }
  }
  .memberList {
    width: 150px;
    height: 100%;
    position: relative;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    min-width: 150px;
    overflow: auto;
    .title {
      line-height: 40px;
      height: 40px;
      text-align: center;
      font-size: 18px;
    }
    .listTree {
      flex: 1;
    }
  }
  .main {
    flex: 1;
    min-width: 1200px;
    padding: 0 20px;
    .title {
      width: 100%;
      height: 80px;
      line-height: 80px;
      text-align: center;
      font-size: 28px;
    }
  }
  .operateDiv {
    min-width: 150px;
    position: relative;
    border: 1px solid #ccc;
    padding: 10px;
    .el-input {
      width: 130px;
      input {
        padding: 0 5px;
        height: 36px;
        line-height: 36px;
      }
    }
    .saveAsImage,
    .rowSeat,
    .printInfo,
    .reserveSeatMore,
    .sellectAll,
    .saveInfo {
      // width: 120px;
      text-align: center;
      display: block;
      margin: 5px auto;
      padding: 2px 4px;
      background-color: rgba(167, 167, 190, 0.2);
      border-radius: 6px;
      cursor: pointer;
    }
  }
  .content {
    width: 100%;
    height: 300px;
    border: 1px solid #000;
    display: flex;
    .left {
      flex: 20;
      display: flex;
      flex-direction: column;
      .left-top {
        display: flex;
        flex-wrap: wrap;
        flex: 6;
        .seat {
          width: 5%;
          height: 16.66666%;
        }
      }
      .aside {
        flex: 1;
      }
      .left-bottom {
        flex: 4;
        display: flex;
        flex-wrap: wrap;
        .seat {
          width: 5%;
          height: 25%;
        }
      }
    }
    .center {
      flex: 12;
      display: flex;
      flex-direction: column;
      .center-top {
        display: flex;
        flex-wrap: wrap;
        flex: 6;
        .seat {
          width: 8.33333%;
          height: 16.66666%;
        }
      }
      .aside {
        flex: 1;
      }
      .center-bottom {
        display: flex;
        flex-wrap: wrap;
        flex: 4;
        .seat {
          width: 8.33333%;
          height: 25%;
        }
      }
    }
    .right {
      flex: 20;
      display: flex;
      flex-direction: column;
      .right-top {
        display: flex;
        flex-wrap: wrap;
        flex: 6;
        .seat {
          width: 5%;
          height: 16.66666%;
        }
      }
      .aside {
        flex: 1;
      }
      .right-bottom {
        flex: 4;
        display: flex;
        flex-wrap: wrap;
        .seat {
          width: 5%;
          height: 25%;
        }
      }
    }
    .aisle {
      flex: 1;
    }
  }
  .seat {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25%;
    height: 16.66666%;
    border: 1px solid #000;
    font-size: 8px;
    text-align: center;
    overflow: hidden;
  }
  .selection-box {
    position: absolute;
    border: 1px dashed #000;
    background-color: rgba(0, 0, 255, 0.2);
    pointer-events: none;
  }
  .seat.selected {
    background-color: yellow; /* 选中座位的样式 */
  }
}
</style>
<style  scoped>
 /* 打印样式 */
        @media print {
            body * {
                visibility: hidden;  /* 隐藏所有元素 */
            }
            .main, .main * {
                visibility: visible;  /* 仅显示指定区域 */
            }
            .main {
                position: absolute;   /* 防止其他元素影响打印布局 */
                left: 0;
                top: 0;
            }
        }
</style>

